<!--<template>-->
<!--  <div class="container">-->
<!--    <el-form ref="stepblus" :model="stepForm" :rules="rules" label-width="150px" class="stepOne">-->
<!--      <el-form-item label="任务名称" prop="name">-->
<!--        <el-input v-model="stepForm.name" class="blue-input" placeholder="请填写任务名称"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="任务描述">-->
<!--        <el-input v-model="stepForm.description" class="blue-input" placeholder="请填写任务名称"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="数据来源层" prop="srcLayerID">-->
<!--        <el-select class="bule-select" v-model="stepForm.srcLayerID" placeholder="请选择" @change="getSrcDatasource">-->
<!--          <el-option v-for="item in layerList" :key="item.layerId" :label="item.layerName" :value="item.layerId">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="srcDatasource" label="原始数据源" prop="srcDatasource">-->
<!--        <el-select class="bule-select" v-model="stepForm.srcDatasource" placeholder="请选择" @change="getSrcDataSchema">-->
<!--          <el-option v-for="item in srcScourceList" :key="item.id" :label="item.dbName" :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item class="srcSchemaName" label="schema名" prop="srcSchemaName">-->
<!--        <el-select class="bule-select" v-model="stepForm.srcSchemaName" placeholder="请选择" @change="getSrcTableName">-->
<!--          <el-option v-for="item in schemaList" :key="item" :label="item" :value="item">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <template>-->
<!--        <el-form-item label="原始数据表" prop="srcTableName">-->
<!--          <el-select class="bule-select" v-model="stepForm.srcTableName" placeholder="请选择">-->
<!--            <el-option v-for="item in srcTableList" :key="item.TABLE_NAME" :label="item.TABLE_NAME"-->
<!--                       :value="item.TABLE_NAME">-->
<!--              <div class="tabledesc"><span>{{ item.TABLE_NAME }}</span>{{ item.TABLE_COMMENT || 'null' }}</div>-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <div v-if="stepForm.srcTableName!=='HIVE111'">-->
<!--          <el-form-item label="数据过滤">-->
<!--            <el-input type="textarea" v-model="stepForm.whereParams" placeholder="请填写数据过滤"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="切分字段">-->
<!--            <el-input type="textarea" v-model="stepForm.readerSplitPk" placeholder="请填写切分字段"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="同步方式" prop="syncType">-->
<!--            <el-select class="bule-select" v-model="stepForm.syncType" placeholder="请选择" @change="getSrcDataType">-->
<!--              <el-option label="全量" value="ALL"></el-option>-->
<!--              <el-option label="增量" value="ADD"></el-option>-->
<!--              &lt;!&ndash;              <el-option label="增量修改" value="ADD_UPDATE"></el-option>&ndash;&gt;-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="增量字段" v-if="stepForm.syncType=='ADD'">-->
<!--            <el-select class="bule-select" v-model="stepForm.incSelectfield" placeholder="请选择">-->
<!--              <el-option v-for="item in incFieldList" :key="item.name" :label="item.name" :value="item.name">-->
<!--                <div class="tabledesc"><span>{{ item.name }}</span><span>{{-->
<!--                    item.comment || ''-->
<!--                  }}</span><span>{{ item.type }}</span><span>{{ item.ifPrimaryKey == true ? '是主键' : '不是主键' }}</span>-->
<!--                </div>-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--        <div v-else>-->
<!--          <el-form-item label="分区">-->
<!--            <el-input type="textarea" v-model="stepForm.readerSplitPk" placeholder="请填写分区信息"></el-input>-->
<!--          </el-form-item>-->
<!--        </div>-->
<!--      </template>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" size="mini" class="sx-button-statesprimary" @click="showData">数据预览</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <div v-if="isshow" class="sideShow" :class="isshow ? 'testwidth' : ''">-->
<!--      <div class="sideHeader">-->
<!--        <span>数据预览</span>-->
<!--        <div class="sx-button-statesprimary" @click="isshow=false">关闭</div>-->
<!--      </div>-->
<!--      <div class="tablebox">-->
<!--        <el-table :data="tableData" class="tableComponent" border style="width: 100%" max-height="1000">-->
<!--          <el-table-column v-for="item in labels" :key="item" :label="item" show-overflow-tooltip>-->
<!--            <template slot-scope="scope">-->
<!--              <span>{{ scope.row[item] }}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->

<!--</template>-->

<!--<script>-->
<!--// import {getDataSourceOrigin, listDbLayer} from "@/api/integration/itgdblayer";-->
<!--import {verifyJobName} from "@/api/integration/syncJob";-->
<!--import {getDataSchema, getDataSource, getDataTableInfo, previewData} from "@/api/integration/metadata";-->

<!--export default {-->
<!--  data() {-->
<!--    const validatePass = async (rule, value, callback) => {-->
<!--      if (value === '') {-->
<!--        callback(new Error('请输入任务名称'));-->
<!--      } else {-->
<!--        if (this.stepForm.name !== '') {-->
<!--          const data = await verifyJobName(this.stepForm.name)-->
<!--          if (data.code != 200 && !this.$route.query.type) {-->
<!--            callback(new Error('任务名称已经存在'));-->
<!--          }-->
<!--          callback();-->
<!--        }-->
<!--        callback();-->
<!--      }-->
<!--    };-->
<!--    return {-->
<!--      status: "",-->
<!--      isshow: false,-->
<!--      labels: [],-->
<!--      tableData: [],-->
<!--      stepForm: {-->
<!--        name: "",-->
<!--        srcLayerID: "",-->
<!--        srcDatasourceName: "",-->
<!--        srcTableName: "",-->
<!--        incSelectfield: '', // 增量字段-->
<!--        syncType: '',-->
<!--        readerSplitPk: '',-->
<!--        whereParams: '',-->
<!--        description: '',-->
<!--        srcSchemaName: '',-->
<!--        srcDatasource: '',-->
<!--        srcDatasourceId: '',-->
<!--      },-->
<!--      layerList: [], // 获取分层-->
<!--      schemaList: [],//获取schema名-->
<!--      srcScourceList: [], // 获取原始数据源-->
<!--      srcTableList: [], // 获取原始数据表-->
<!--      incFieldList: [], // 获取增量字段-->

<!--      srcScourceType: '', // 原始数据源类型-->
<!--      srcScourceIp: '', // 原始数据源类型-->
<!--      routeList: [-->
<!--        {-->
<!--          route: "",-->
<!--        },-->
<!--      ],-->
<!--      rules: {-->
<!--        name: [-->
<!--          {required: true, validator: validatePass, trigger: 'blur'},-->
<!--        ],-->
<!--        srcLayerID: [-->
<!--          {required: true, message: '请选择数据来源层', trigger: 'change'}-->
<!--        ],-->
<!--        srcDatasource: [-->
<!--          {required: true, message: '请选择数据源', trigger: 'change'}-->
<!--        ],-->
<!--        srcSchemaName: [-->
<!--          {required: true, message: '请选择schema名', trigger: 'change'}-->
<!--        ],-->
<!--        srcDatasourceName: [-->
<!--          {required: true, message: '请选择原始数据源', trigger: 'change'}-->
<!--        ],-->
<!--        srcTableName: [-->
<!--          {required: true, message: '请选择原始数据表', trigger: 'change'}-->
<!--        ],-->
<!--        syncType: [-->
<!--          {required: true, message: '请选择同步方式', trigger: 'change'}-->
<!--        ]-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  watch: {-->
<!--    // eslint-disable-next-line func-names-->
<!--    'stepForm.srcTableName': function (newval, oldval) {-->
<!--      // 监听数据变化-->
<!--      if (oldval) {-->
<!--        if (sessionStorage.getItem('step0') && newval !== oldval) {-->
<!--          sessionStorage.setItem('filedstatus', true)-->
<!--          sessionStorage.removeItem('constList')-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  updated() {-->
<!--    this.$emit('srcUpdataTable', this.stepForm.srcTableName);-->
<!--  },-->
<!--  created: async function (val) {-->
<!--    // // 获取数据层数据-->
<!--    const layer = await listDbLayer();-->
<!--    this.layerList = layer.rows;-->
<!--    this.status = sessionStorage.getItem("addStatus");-->
<!--    sessionStorage.setItem('layerList', JSON.stringify(layer.rows))-->

<!--    // 判断是否有存储值-->
<!--    const stepdata = sessionStorage.getItem('step0')-->
<!--    if (stepdata) {-->
<!--      this.stepForm = JSON.parse(stepdata)-->
<!--      //获取数据源-->
<!--      this.srcScourceList = [];-->
<!--      // const scource = await getDataSourceOrigin(this.stepForm.srcLayerID);-->
<!--      const scource = null;-->
<!--      this.srcScourceList = scource.data;-->
<!--      sessionStorage.setItem('srcScourceList', JSON.stringify(scource.data));-->
<!--      //获取schema-->
<!--      const dbSchemas = await getDataSchema({datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId'))});-->
<!--      this.schemaList = dbSchemas.data;-->
<!--      sessionStorage.setItem('schemaList', JSON.stringify(dbSchemas.data));-->
<!--      //获取tables-->
<!--      const data = await getDataSource({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId')),-->
<!--        tableSchema: this.stepForm.srcSchemaName,-->
<!--      });-->
<!--      this.srcTableList = data.data;-->
<!--      sessionStorage.setItem('srcTableList', JSON.stringify(data.data));-->
<!--      //获取字段-->
<!--      const inincFieldData = await getDataTableInfo({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId')),-->
<!--        tableSchema: this.stepForm.srcSchemaName,-->
<!--        tableName: this.stepForm.srcTableName,-->
<!--      });-->
<!--      this.incFieldList = inincFieldData.data.columns;-->
<!--      sessionStorage.setItem('incFieldList', JSON.stringify(inincFieldData.data.columns))-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    addRule(index) {-->
<!--      this.routeList.splice(index + 1, 0, {route: ""});-->
<!--    },-->
<!--    removeRule(index) {-->
<!--      this.routeList.splice(index, 1);-->
<!--    },-->

<!--    // 获取数据源-->
<!--    async getSrcDatasource(val) {-->
<!--      this.stepForm.srcDatasource = ''-->
<!--      // getDataSourceOrigin(this.stepForm.srcLayerID).then(response => {-->
<!--      //   this.srcScourceList = response.data;-->
<!--      //   sessionStorage.setItem('srcScourceList', JSON.stringify(response.data))-->
<!--      // })-->
<!--    },-->
<!--    // 获取schema名-->
<!--    async getSrcDataSchema(val) {-->
<!--      sessionStorage.setItem('srcDatasourceId', val)-->
<!--      getDataSchema({datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId'))}).then(response => {-->
<!--        this.schemaList = response.data;-->
<!--      })-->
<!--      let obj = {};-->
<!--      // obj = this.srcScourceList.find((item)=>{-->
<!--      //     return item.id === val;-->
<!--      // });-->
<!--      // console.log(obj.id);-->
<!--      // console.log(obj.dbName);-->
<!--      obj = this.srcScourceList.find(item => {-->
<!--        return item.id === val;-->
<!--      })-->
<!--      this.stepForm.srcDatasource = obj.dbName;-->
<!--      this.stepForm.srcDatasourceId = obj.id;-->

<!--    },-->
<!--    // 获取原始数据表-->
<!--    async getSrcTableName(val) {-->
<!--      const data = await getDataSource({-->
<!--        datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId')),-->
<!--        tableSchema: this.stepForm.srcSchemaName,-->
<!--      });-->
<!--      this.srcTableList = data.data;-->
<!--    },-->
<!--    // 获取增量字段-->
<!--    async getSrcDataType(val) {-->
<!--      var that = this-->
<!--      if (this.stepForm.syncType == 'ADD') {-->
<!--        if (this.stepForm.srcDatasource == '' && this.stepForm.srcSchemaName == '' && this.stepForm.srcTableName == '') {-->
<!--          // that.msgError("请选择必选项");-->
<!--        } else {-->
<!--          const data = await getDataTableInfo({-->
<!--            datasourceId: JSON.parse(sessionStorage.getItem('srcDatasourceId')),-->
<!--            tableSchema: this.stepForm.srcSchemaName,-->
<!--            tableName: this.stepForm.srcTableName,-->
<!--          });-->
<!--          this.incFieldList = data.data.columns;-->
<!--          sessionStorage.setItem('incFieldList', JSON.stringify(data.data.columns))-->
<!--        }-->
<!--      }-->
<!--    },-->


<!--    //  数据预览-->
<!--    async showData() {-->
<!--      if (!this.stepForm.srcDatasourceName && !this.stepForm.srcTableName) {-->
<!--        this.$message.warning('数据源与数据表不能为空')-->
<!--        return-->
<!--      }-->
<!--      const data = await previewData({-->
<!--        datasourceId: this.stepForm.srcDatasource,-->
<!--        clouNames: '*',-->
<!--        rowSize: 15,-->
<!--        schemaName: this.stepForm.srcSchemaName,-->
<!--        tableName: this.stepForm.srcTableName,-->
<!--      })-->
<!--      if (data.code == 500) {-->
<!--        // this.$msgError = data.msg-->
<!--      }-->
<!--      this.tableData = data.data-->
<!--      this.labels = Object.keys(data.data[0]).filter(-->
<!--        (item) => item-->
<!--      )-->
<!--      this.isshow = true-->
<!--    }-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.blue-input {-->
<!--  .el-input__inner {-->
<!--    width: 560px;-->
<!--    height: 30px;-->
<!--    background: #ffffff;-->
<!--    border-radius: 3px;-->
<!--    line-height: 30px;-->
<!--    box-shadow: 0px 1px 1px 0px rgba(16, 22, 26, 0.2) inset,-->
<!--    0px 0px 0px 1px rgba(16, 22, 26, 0.15) inset;-->
<!--  }-->
<!--}-->

<!--.bule-select {-->
<!--  .el-input__inner {-->
<!--    background: #f5f8fa;-->
<!--    border-radius: 3px;-->
<!--    box-shadow: 0px 0px 0px 1px rgba(16, 22, 26, 0.2) inset,-->
<!--    0px -1px 1px 0px rgba(16, 22, 26, 0.1) inset;-->
<!--    height: 30px;-->
<!--    width: 560px;-->
<!--    line-height: 30px;-->
<!--  }-->

<!--  .el-input__icon {-->
<!--    line-height: 30px;-->
<!--  }-->
<!--}-->

<!--.el-textarea__inner {-->
<!--  width: 560px;-->
<!--}-->

<!--.rule-item-operate {-->
<!--  // position: absolute;-->
<!--  // left: 950px;-->
<!--  // top: calc(50% - 30px);-->
<!--  // min-height: 60px;-->
<!--  // padding: 15px 30px;-->
<!--  display: flex;-->
<!--  align-items: center;-->

<!--  .el-icon-circle-plus {-->
<!--    // position: absolute;-->
<!--    // left: 0;-->
<!--    // top: 0;-->
<!--    cursor: pointer;-->
<!--    font-size: 20px;-->
<!--    //color: $primary;-->
<!--    margin: 0 10px;-->
<!--  }-->

<!--  .el-icon-remove {-->
<!--    // position: absolute;-->
<!--    // left: 0;-->
<!--    // bottom: 0;-->
<!--    cursor: pointer;-->
<!--    font-size: 20px;-->
<!--    //color: $danger;-->
<!--    margin: 0 10px;-->
<!--  }-->
<!--}-->

<!--.routeItem {-->
<!--  display: flex;-->
<!--}-->

<!--.el-form-item {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  margin-bottom: 20px;-->

<!--  .sx-button-statesprimary {-->
<!--    margin-left: 0;-->
<!--    margin-top: 20px;-->
<!--  }-->
<!--}-->

<!--.srcDatasour {-->
<!--  .el-form-item__content {-->
<!--    width: 560px;-->
<!--    flex-direction: column;-->
<!--  }-->
<!--}-->

<!--.el-form-item__content {-->
<!--  margin: 0 !important;-->
<!--  line-height: 0;-->
<!--  display: flex;-->
<!--  // flex-direction: column;-->
<!--}-->

<!--.el-form-item__label {-->
<!--  text-align: left;-->
<!--  line-height: 20px !important;-->
<!--  margin-bottom: 5px;-->
<!--}-->

<!--.routeBox {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.originalData {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->

<!--  .fromitemdesc {-->
<!--    font-size: 12px;-->
<!--    color: #5c7080;-->
<!--    line-height: 20px;-->
<!--    margin-bottom: 5px;-->
<!--  }-->
<!--}-->

<!--.targetData {-->
<!--  width: 720px;-->
<!--  height: 240px;-->
<!--  opacity: 1;-->
<!--  background: #ffffff;-->
<!--  border: 1px solid rgba(24, 32, 38, 0.2);-->
<!--  border-radius: 5px;-->
<!--  margin-bottom: 5px;-->
<!--  padding: 10px 20px;-->
<!--  margin-top: 10px;-->
<!--}-->

<!--.stepOne {-->
<!--  position: relative;-->
<!--  width: 85%;-->
<!--  padding: 5% 8%;-->
<!--  margin: 0 auto;-->
<!--  border: 1px dashed #e9e9e9;-->
<!--  border-radius: 6px;-->
<!--  background-color: #FAFAFA;-->
<!--}-->

<!--.el-form-item {-->
<!--  display: inherit;-->
<!--  margin-bottom: 15px;-->

<!--  .el-form-item__label {-->
<!--    text-align: left;-->
<!--  }-->
<!--}-->

<!--.fromItemDesc {-->
<!--  line-height: 1;-->
<!--  color: #5c7080;-->
<!--  font-size: 12px;-->
<!--  margin-top: 5px;-->
<!--}-->

<!--.tabledesc {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.container {-->
<!--  position: relative;-->
<!--  // border: 1px solid red;-->
<!--  padding: 20px 20px 20px 20px;-->
<!--  box-sizing: border-box;-->
<!--}-->

<!--.sideShow {-->
<!--  position: absolute;-->

<!--  height: 100%;-->
<!--  width: 0px;-->
<!--  right: 10px;-->
<!--  top: 0;-->
<!--  background: #ffffff;-->
<!--  border: 1px solid #cccdcf;-->
<!--  // border-radius: 5px;-->
<!--}-->

<!--.sideHeader {-->
<!--  height: 40px;-->
<!--  padding: 0 20px;-->
<!--  font-size: 14px;-->
<!--  color: #5c7080;-->
<!--  line-height: 40px;-->
<!--  box-shadow: 0px -1px 0px 0px #cccdcf inset;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--}-->

<!--.testwidth {-->
<!--  width: 800px;-->
<!--  transition: width 0.5s ease;-->
<!--}-->

<!--.tablebox {-->
<!--  padding: 10px;-->
<!--  overflow: auto;-->
<!--}-->

<!--.el-input, .el-select, .el-textarea {-->
<!--  width: 90%;-->
<!--}-->
<!--</style>-->
